<!--
todo文本插值：
!{{}}（插值表达式）:
  作用：
    文本插值用于将 JavaScript 表达式的值插入到 HTML 中。
  语法：
    1、使用 {{ }} 来插入变量或表达式。
    2、支持简单的字符串、表达式、条件判断、数组操作等。
    ps:支持动态拼接字符串和条件渲染

!v-text 指令:
  作用：
    v-text 指令和 {{ }} 的作用相同，用于显示文本内容。但它是一个指令，适合需要动态绑定文本内容的场景。
  语法：
    <p v-text="rawHtml"></p>
    ps:v-text 是指令，可以在需要动态绑定时直接使用，适合替代 innerText

!v-html 指令
  作用：
    v-html 指令用于将 HTML 字符串渲染为真正的 HTML 元素，而不是纯文本。需要注意，v-html 会直接插入内容，可能带来 XSS 安全问题。
  语法：
    <div v-html="rawHtml"></div>
    ps:rawHtml 的内容将被解析为 HTML 元素（例如 <span> 标签）

!事件绑定:
  作用：
    通过 @ 或 v-on 绑定事件处理器
  语法：
    <button @click="handlerFunction">Click Me</button>

!响应式数据绑定:
  作用：
    通过 Vue 的响应式数据系统实现自动更新的 UI。例如，使用 ref 定义响应式变量，使用 storeToRefs 从 Pinia 中获取状态

!组合使用：
  Vue 的模板语法可以结合插值、指令、事件和动态属性实现复杂的功能，例如表单、列表渲染等

!区别：
  特性	      {{}} (插值表达式)	              v-text	               v-html
内容类型	   文本（自动转义 HTML）	      文本（自动转义 HTML）	    HTML（不会转义 HTML）
应用场景	      显示简单文本	              动态绑定纯文本	          动态渲染 HTML
HTML 转义	      自动转义	                    自动转义	                不转义
安全性	          高	                          高	              低，需确保数据可信
-->

<template>
    <div id="wrap">
      <h1>文本插值&原始 HTML</h1>
      <p>{{ str }}</p>
      <p>{{ rawHtml }}</p>
      <p v-text="rawHtml"></p>
      <hr />
      <!-- ?{{  }} 文本插值表达式 -->
      <p>Using text interpolation:{{ rawHtml + '后缀字符串' }}</p>
      <p>Using text interpolation:{{ `${rawHtml}后缀字符串` }}</p>
      <p>Using text interpolation:{{ isTrue ? rawHtml : `${rawHtml}后缀字符串` }}</p>
      <p>Using text interpolation:{{ isTrue ? arr.join(',') : `${rawHtml}后缀字符串` }}</p>
      <p>Using text interpolation:{{ arr.join(',') }}</p>
      <hr />
      <!-- ?v-text指令 -->
      <p v-text="'Using text interpolation:' + rawHtml + '后缀字符串'"></p>
      <p v-text="`Using text interpolation:${rawHtml}后缀字符串`"></p>
      <p v-text="isTrue ? rawHtml : `${rawHtml}后缀字符串`"></p>
      <p v-text="arr.join(',')"></p>
      <hr />
      <!-- ?v-html 指令 -->
      <p v-html="'Using text interpolation:' + rawHtml + '后缀字符串'"></p>
      <p v-html="`Using text interpolation:${rawHtml}后缀字符串`"></p>
      <p v-html="isTrue ? rawHtml : `${rawHtml}后缀字符串`"></p>
      <p v-html="arr.join(',')"></p>
      <!-- ?事件绑定-响应式数据绑定 -->
      <p>Current Count:{{ count }}</p>
      <p>Current doubleCount:{{ doubleCount }}</p>
      <p>{{ cr }}</p>
      <button type="button" v-on:click="counterStore.increment">增加</button>
      <button type="button" @click="cr++">增加cr</button>
      <!-- ?组合使用 -->
      <ul>
        <!-- <li v-for="(item, index) in arr" :key= "index === 0">{{ item }}</li> -->
        <li v-for="(item, index) in arr" :key="index">{{ item }}</li>

      </ul>
    </div>
  </template>
  
  <script lang="ts">
  export default {
    name: 'dayStuDemo8',
  }
  </script>
  
  <script lang="ts" setup>
  import { useCounterStore } from '@/stores/counter'
  import { storeToRefs } from 'pinia' //Pinia（Vue 的状态管理库）
  import { ref } from 'vue'
  //演示{{}} v-text v-html
  const str = ref('hello world')
  const rawHtml = `<span style="color:blue">我是html标签span</span>`
  const isTrue = false
  const arr = ['小明', '小红', '小绿']
  //事件绑定 事件绑定-响应式数据绑定
  const counterStore = useCounterStore() //这是 Pinia 提供的一个方法，它用来获取一个 store，即存储数据和逻辑的地方。你可以把 counterStore 想象成一个包含数字（如计数器）和处理这些数字的函数（比如增加数字）的一组数据
  const { count, doubleCount } = storeToRefs(counterStore) //生成的变量
  const cr = ref(0) //声明的变量
  </script>
  
  <style lang="scss">
  @use '@/assets/common.scss'; //使用封装的公共样式
  </style>
  